<template>
    <view class="container">
        <scroll-view :scroll-y="true" style="height: 1100rpx; " @scrolltolower="onLoadMore">
            <view class="content-wrap" v-for="houselistData in list" :key="houselistData.id">
                <view class="content" @click="informationBtn(houselistData.id)">
                    <view class="pic">
                        <image :src="houselistData.images.split(',')[0]" mode="aspectFill"></image>
                    </view>
                    <view class="info">
                        <view class="title">
                            <view class="type_detail">
                                {{ type[houselistData.type] }}
                            </view>
                            <view class="item_title">{{ houselistData.addr }}</view>
                        </view>
                        <view class="area">
                            <text> {{ houselistData.region }}</text>
                            <text>{{ houselistData.sector }}</text>
                        </view>
                        <view class="price">
                            {{ houselistData.rent }}
                            <text class="fontSize">元/m<sup>3</sup></text>
                        </view>
                    </view>
                </view>
                <view class="btn-wrap" v-if="isDelete">
                    <view>
                        <u-button text='删除' size='mini' @click="handleDelete(houselistData.id)"></u-button>
                    </view>
                </view>
            </view>
            <view style="width: 100%;
					text-align: center;
					padding: 20px;
					color: #999;" v-if="isLoading" class="loading">
                正在加载...
            </view>
            <view style="width: 100%;
					text-align: center;
					padding: 20px;
					color: #999;" v-if="!hasMoreData &&!isLoading" class="no-more">
                没有更多数据了
            </view>
        </scroll-view>
        <up-modal :show="delShow" contentTextAlign='center' :showCancelButton='true' @cancel="delShow=false"
                  @confirm="handleConfirmDel" title="提示" content='确认删除？'></up-modal>
    </view>
</template>

<script setup>
import {
    onLoad,
    onShow,
    onReady
} from "@dcloudio/uni-app";
import {
    ref,
    onMounted,
    watch,
    defineProps
} from 'vue';
import {
    houseList,
    delHouse
} from "@/api/room.js"
import {
    toast
} from '../../utils/common';
// 定义接收的组合参数
const props = defineProps({
    region: {
        type: String,
        default: ''
    },
    sector: {
        type: String,
        default: ''
    },
    houseType: {
        type: String,
        default: ''
    },
    minRent: {
        type: String,
        default: ''
    },
    maxRent: {
        type: String,
        default: ''
    },
    rentType: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: ''
    },
    keywords: {
        type: String,
        default: ''
    },
    isDelete: {
        type: Boolean,
        default: false
    },
    idealType: {
        type: String,
        default: ''
    },
    showPhone: {
        type: String,
        default: '1'
    },
    searchData: {
        type: Object,
        default: () => ({})
    },

});
const delShow = ref(false)
const delId = ref('')
// 模拟数据
const list = ref([]);
const searchData = ref({});
const page = ref(1);
const pageSize = ref(10);
const refresherTriggered = ref(false);
const isLoading = ref(false);
const hasMoreData = ref(true);
// 付款方式 PAY_ONE=付一押一，PAY_THREE=付三押一，PAY_SIX=半年付，PAY_ANNUAL=年付
const houseType = ref({
    PAY_ONE: '付一押一',
    PAY_THREE: '付三押一',
    PAY_SIX: '半年付',
    PAY_ANNUAL: '年付',
});
// 类型 OFFICE=写字楼，NEAR_SUBWAY=临地铁，WHOLE_RENTAL=整租，COTENANCY=合租
const type = ref({
    OFFICE: '写字楼',
    NEAR_SUBWAY: '临地铁',
    WHOLE_RENTAL: '整租',
    COTENANCY: '合租',
});

watch(() => props.searchData, (newValue) => {
    console.log(1111, newValue)
    searchData.value = newValue
    page.value = 1
    list.value = []
    hasMoreData.value = true
    initData()
    // processedObject.value = {
    //     ...newValue,
    //     processed: true
    // };
});
// 监听组合参数变化
// watch([() => props.region,() => props.idealType, () => props.sector, () => props.houseType, () => props.rentType, () => props.maxRent, () =>
//     props.minRent, () => props.type, () => props.keywords
// ], ([]) => {
//     page.value = 1
//     list.value = []
//     hasMoreData.value = true
//     console.log('执行1')
//     initData()
// }, { deep: true });

// 初始化数据
const initData = async () => {
    let params = {
        pageNum: page.value,
        pageSize: 10,
        region: searchData.value.region,
        idealType: searchData.value.idealType,
        sector: searchData.value.sector,
        houseType: searchData.value.houseType,
        rentType: searchData.value.rentType,
        minRent: searchData.value.minRent ? Number(searchData.value.minRent) : undefined,
        maxRent: searchData.value.maxRent ? Number(searchData.value.maxRent) : undefined,
        type: searchData.value.type,
        keywords: searchData.value.keywords
    }

    const res = await houseList(params);
    if (res.code == 200) {
        list.value = res.rows
        if (res.rows.length < pageSize.value) {
            hasMoreData.value = false;
        }
    }
};
const informationBtn = (id) => {
    console.log(11111, props.showPhone)
    uni.navigateTo({
        url: '/pages/information/information?id=' + id + '&showPhone=' + props.showPhone
    })
}

// 上滑加载更多
const onLoadMore = async () => {
    if (isLoading.value || !hasMoreData.value) return;
    isLoading.value = true;
    page.value++;
    let params = {
        pageNum: page.value,
        pageSize: 10,
        region: searchData.value.region,
        sector: searchData.value.sector,
        idealType: searchData.value.idealType,
        houseType: searchData.value.houseType,
        rentType: searchData.value.rentType,
        minRent: searchData.value.minRent ? Number(searchData.value.minRent) : undefined,
        maxRent: searchData.value.maxRent ? Number(searchData.value.maxRent) : undefined,
        type: searchData.value.type,
        keywords: searchData.value.keywords
    }
    const res = await houseList(params);
    if (res.rows.length > 0) {
        list.value = [...list.value, ...res.rows];
        if (res.rows.length < 10) {
            hasMoreData.value = false;
        }
    } else {
        hasMoreData.value = false;
    }
    isLoading.value = false;
};
onShow(() => {
    list.value = []
    searchData.value = {}
    const params = uni.getStorageSync('switchTabParams');
    if (params) {
        searchData.value = params
        // 获取参数后移除本地存储中的数据
        uni.removeStorageSync('switchTabParams');
        initData();
    } else {
        initData();
    }
    console.log(11111, searchData.value)
    // console.log(111,(props.type == ''))
    // if (props.region == '' && props.idealType == '' && props.sector  == '' && props.houseType == '' && props.rentType == '' && props.maxRent == '' && props.minRent  == '' &&  props.type  == '' && props.keywords == '') {
    //     console.log('执行2')
    //     initData();
    // }
});

const handleDelete = (id) => {
    delId.value = id
    delShow.value = true
}
const handleConfirmDel = () => {

    delHouse(delId.value).then(res => {
        if (res.code == 200) {
            toast("删除成功")
            page.value = 1
            initData()
        } else if (res.msg) {
            toast(res.msg)
        }
    }).catch(() => {
        toast('删除失败')
    }).finally(() => {
        delShow.value = false
    })
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    overflow: hidden;

    .content-wrap {
        margin-bottom: 24rpx;

        .btn-wrap {
            display: flex;
            justify-content: flex-end;
        }
    }

    .content {
        display: flex;
        width: 686rpx;
        height: 187rpx;
        box-shadow: 0 0 40 0 rgba(230, 237, 246, 0.5);

        .pic {
            image {
                width: 250rpx;
                height: 187rpx;
                border-radius: 5rpx;
            }
        }

        .info {
            width: 430rpx;
            height: 155rpx;
            padding: 16rpx 18rpx;

            .title {
                display: flex;
                justify-content: flex-start;
                width: 356rpx;
                height: 39rpx;
                gap: 16rpx;
                margin-bottom: 16rpx;

                .type_detail {
                    height: 36rpx;
                    border-radius: 3rpx;
                    padding: 4rpx 10rpx;
                    font-size: 20rpx;
                    line-height: 33rpx;
                    background-color: rgba(250, 169, 63, 1);
                }

                .item_title {
                    font-size: 28rpx;
                }
            }

            .area {
                height: 36rpx;
                gap: 8rpx;
                margin-bottom: 16rpx;

                text {
                    width: 80rpx;
                    height: 36rpx;
                    border-radius: 3rpx;
                    border: 1rpx solid rgba(187, 187, 187, 1);
                    padding: 4rpx 10rpx;
                    gap: 107rpx;
                    font-size: 20rpx;
                    font-weight: 400;
                    color: rgba(187, 187, 187, 1);
                    margin-right: 8rpx;
                }
            }

            .price {
                width: 160rpx;
                height: 39rpx;
                gap: 7rpx;
                margin-bottom: 16rpx;
                font-size: 28rpx;
                color: rgba(234, 35, 35, 1);

                .fontSize {
                    font-size: 22rpx;
                }
            }

            .loading {
            }

            .no-more {
                width: 100%;
                text-align: center;
                padding: 20px;
                color: #999;
            }
        }
    }

}
</style>